<template>
  <div>
    <!-- 背景粒子动效 -->
    <div id="particlesId"> 
    </div>
    <div class="log">
      <h4>商城后台管理系统</h4>
      <div class="form-group">
        <input type="type" class="form-style" placeholder="管理员" v-model="admin">
        <i class="fa el-icon-user"></i>
      </div>
      <div class="form-group">
        <input type="password" class="form-style" placeholder="密码" v-model="pass">
        <i class="fa el-icon-key"></i>
      </div>
      <a @click="logIn"><span>管理员</span></a>
    </div>
  </div> 
</template>

<script>
import particles from 'particles.js'
import particlesConfig from '../../assets/particles.json' 
export default {
    name:'Admin',
    data(){
      return{
        admin:'admin',
        pass:'admin'
      }
    },
    methods:{
      logIn(){ //管理员登录
        if(this.admin === 'admin' && this.pass === 'admin'){
          this.$message.success('欢迎您，管理员!')
          this.$router.push('/backstage')
        }else{
          this.$message.error('通行证错误！')
        }
      }
    },
    mounted(){
        particlesJS("particlesId",particlesConfig);
    }
}
</script>

<style scoped>
    span:hover{
      color: white;
    }
    a{
      margin: auto;
      cursor: pointer;
      line-height: 45px;
      display: block;
      height: 45px;
      width: 80px;
      background: #CC9966;
      margin-top: 20px;
      margin-bottom: 20px;
      border-radius: 5px;
      font-size: 20px;
      font-weight: 200;
      user-select: none;
      color: black;
    }
    h4{
      margin-top: 30px;
      margin-bottom: 30px;
      font-size: 24px;
      font-weight: 300;
    }
    #particlesId{
      background-color: #1F2029;
      position: absolute; 
      width: 100%;
      height: 100%;
      background-repeat: no-repeat; 
      background-size: cover;
      background-position: 50% 50%;
      z-index: -1;
      /* padding:50px; */
    }
    .log{
      opacity: 0.9;
      border-radius: 5px;
      background: #2A2B38;
      width:400px;
      /* margin:0 auto; */
      max-width: 100%;
      max-height: 100%;
      color: #CC9966;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .form-style {
    padding: 13px 20px;
    padding-left: 55px;
    height: 24px;
    width: 62%;
    font-weight: 500;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.5px;
    outline: none;
    color: #C4C3CA;
    background-color: #1f2029;
    border: none;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    box-shadow: 0 4px 8px 0 rgba(21, 21, 21, 0.2);
    }
    .fa{
    position: absolute;
    top: 0;
    left: 60px;
    height: 48px;
    font-size: 24px;
    line-height: 48px;
    text-align: left;
    color: #CC9966;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    }
    .form-group {
    position: relative;
    height: 48px;
    margin-bottom: 20px;
    display: block;
    }
</style>